<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" 
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>营养目标设置 - 智能营养管理系统</title>
</head>
<body>
    <div layout:fragment="content">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-bullseye me-2"></i>营养目标设置</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a th:href="@{/dashboard}">仪表盘</a></li>
                    <li class="breadcrumb-item active">营养目标</li>
                </ol>
            </nav>
        </div>

        <!-- 消息提示 -->
        <div th:replace="~{layout/base :: messages}"></div>

        <div class="row">
            <!-- 当前目标卡片 -->
            <div class="col-lg-8">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-target me-2"></i>当前营养目标</h5>
                    </div>
                    <div class="card-body">
                        <form th:action="@{/nutrition-goals}" method="post">
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="calories" class="form-label">
                                        <i class="fas fa-fire text-danger me-2"></i>每日卡路里目标
                                    </label>
                                    <div class="input-group">
                                        <input type="number" class="form-control form-control-lg" 
                                               name="calories" id="calories" 
                                               th:value="${user.dailyCaloriesGoal}" 
                                               min="800" max="5000" required>
                                        <span class="input-group-text">kcal</span>
                                    </div>
                                    <div class="form-text">建议范围：800-5000 kcal</div>
                                </div>
                                
                                <div class="col-md-6 mb-4">
                                    <label for="protein" class="form-label">
                                        <i class="fas fa-drumstick-bite text-warning me-2"></i>每日蛋白质目标
                                    </label>
                                    <div class="input-group">
                                        <input type="number" class="form-control form-control-lg" 
                                               name="protein" id="protein" 
                                               th:value="${user.dailyProteinGoal}" 
                                               min="30" max="500" required>
                                        <span class="input-group-text">g</span>
                                    </div>
                                    <div class="form-text">建议范围：30-500 g</div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="carbs" class="form-label">
                                        <i class="fas fa-bread-slice text-info me-2"></i>每日碳水化合物目标
                                    </label>
                                    <div class="input-group">
                                        <input type="number" class="form-control form-control-lg" 
                                               name="carbs" id="carbs" 
                                               th:value="${user.dailyCarbsGoal}" 
                                               min="50" max="800" required>
                                        <span class="input-group-text">g</span>
                                    </div>
                                    <div class="form-text">建议范围：50-800 g</div>
                                </div>
                                
                                <div class="col-md-6 mb-4">
                                    <label for="fat" class="form-label">
                                        <i class="fas fa-tint text-success me-2"></i>每日脂肪目标
                                    </label>
                                    <div class="input-group">
                                        <input type="number" class="form-control form-control-lg" 
                                               name="fat" id="fat" 
                                               th:value="${user.dailyFatGoal}" 
                                               min="20" max="200" required>
                                        <span class="input-group-text">g</span>
                                    </div>
                                    <div class="form-text">建议范围：20-200 g</div>
                                </div>
                            </div>
                            
                            <!-- 营养比例显示 -->
                            <div class="alert alert-light">
                                <h6><i class="fas fa-chart-pie me-2"></i>营养比例分析</h6>
                                <div class="row text-center">
                                    <div class="col-3">
                                        <div class="text-danger">
                                            <i class="fas fa-fire"></i>
                                            <div class="fw-bold" id="caloriesPercent">-</div>
                                            <small>卡路里</small>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="text-warning">
                                            <i class="fas fa-drumstick-bite"></i>
                                            <div class="fw-bold" id="proteinPercent">-</div>
                                            <small>蛋白质</small>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="text-info">
                                            <i class="fas fa-bread-slice"></i>
                                            <div class="fw-bold" id="carbsPercent">-</div>
                                            <small>碳水化合物</small>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="text-success">
                                            <i class="fas fa-tint"></i>
                                            <div class="fw-bold" id="fatPercent">-</div>
                                            <small>脂肪</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                <button type="button" class="btn btn-outline-info" onclick="autoCalculate()">
                                    <i class="fas fa-calculator me-2"></i>自动计算
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>保存目标
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 推荐信息卡片 -->
            <div class="col-lg-4">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="fas fa-lightbulb me-2"></i>智能推荐</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <h6 class="text-muted">基于您的身体数据</h6>
                            <ul class="list-unstyled">
                                <li><strong>BMI：</strong><span th:text="${bmi != null ? #numbers.formatDecimal(bmi, 1, 1) : '未计算'}">0.0</span></li>
                                <li><strong>BMR：</strong><span th:text="${bmr != null ? #numbers.formatDecimal(bmr, 0, 0) + ' kcal' : '未计算'}">0 kcal</span></li>
                                <li><strong>TDEE：</strong><span th:text="${tdee != null ? #numbers.formatDecimal(tdee, 0, 0) + ' kcal' : '未计算'}">0 kcal</span></li>
                            </ul>
                        </div>
                        
                        <div class="alert alert-warning">
                            <h6><i class="fas fa-exclamation-triangle me-2"></i>推荐值</h6>
                            <ul class="mb-0 small">
                                <li>卡路里：基于TDEE计算</li>
                                <li>蛋白质：体重 × 1.6g</li>
                                <li>脂肪：总卡路里的27.5%</li>
                                <li>碳水：剩余卡路里</li>
                            </ul>
                        </div>
                        
                        <form th:action="@{/nutrition-goals/auto-calculate}" method="post">
                            <div class="d-grid">
                                <button type="submit" class="btn btn-outline-primary">
                                    <i class="fas fa-magic me-2"></i>使用推荐值
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- 营养知识卡片 -->
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0"><i class="fas fa-book me-2"></i>营养知识</h5>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="nutritionAccordion">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" 
                                            data-bs-toggle="collapse" data-bs-target="#collapseCalories">
                                        卡路里
                                    </button>
                                </h2>
                                <div id="collapseCalories" class="accordion-collapse collapse" 
                                     data-bs-parent="#nutritionAccordion">
                                    <div class="accordion-body small">
                                        卡路里是能量单位，维持基本生命活动和日常活动所需的能量。
                                        摄入过多会导致体重增加，过少会影响健康。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" 
                                            data-bs-toggle="collapse" data-bs-target="#collapseProtein">
                                        蛋白质
                                    </button>
                                </h2>
                                <div id="collapseProtein" class="accordion-collapse collapse" 
                                     data-bs-parent="#nutritionAccordion">
                                    <div class="accordion-body small">
                                        蛋白质是构建和修复身体组织的重要营养素，
                                        对肌肉生长、免疫系统和酶的产生至关重要。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" 
                                            data-bs-toggle="collapse" data-bs-target="#collapseCarbs">
                                        碳水化合物
                                    </button>
                                </h2>
                                <div id="collapseCarbs" class="accordion-collapse collapse" 
                                     data-bs-parent="#nutritionAccordion">
                                    <div class="accordion-body small">
                                        碳水化合物是身体的主要能量来源，
                                        为大脑和肌肉提供快速能量。选择复合碳水更健康。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" 
                                            data-bs-toggle="collapse" data-bs-target="#collapseFat">
                                        脂肪
                                    </button>
                                </h2>
                                <div id="collapseFat" class="accordion-collapse collapse" 
                                     data-bs-parent="#nutritionAccordion">
                                    <div class="accordion-body small">
                                        脂肪提供能量，帮助吸收脂溶性维生素，
                                        维持细胞膜健康。选择不饱和脂肪更有益。
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="page-scripts">
        <script>
            function calculateNutritionRatio() {
                const calories = parseFloat(document.getElementById('calories').value) || 0;
                const protein = parseFloat(document.getElementById('protein').value) || 0;
                const carbs = parseFloat(document.getElementById('carbs').value) || 0;
                const fat = parseFloat(document.getElementById('fat').value) || 0;
                
                const proteinCalories = protein * 4;
                const carbsCalories = carbs * 4;
                const fatCalories = fat * 9;
                const totalCalculatedCalories = proteinCalories + carbsCalories + fatCalories;
                
                if (totalCalculatedCalories > 0) {
                    const proteinPercent = ((proteinCalories / totalCalculatedCalories) * 100).toFixed(1);
                    const carbsPercent = ((carbsCalories / totalCalculatedCalories) * 100).toFixed(1);
                    const fatPercent = ((fatCalories / totalCalculatedCalories) * 100).toFixed(1);
                    
                    document.getElementById('proteinPercent').textContent = proteinPercent + '%';
                    document.getElementById('carbsPercent').textContent = carbsPercent + '%';
                    document.getElementById('fatPercent').textContent = fatPercent + '%';
                    document.getElementById('caloriesPercent').textContent = calories + ' kcal';
                }
            }
            
            function autoCalculate() {
                // 这里应该从用户数据计算推荐值
                // 暂时使用示例值
                const weight = 65; // 应该从用户数据获取
                const tdee = 2000; // 应该从用户数据获取
                
                const recommendedProtein = Math.round(weight * 1.6);
                const recommendedFat = Math.round(tdee * 0.275 / 9);
                const recommendedCarbs = Math.round((tdee - recommendedProtein * 4 - recommendedFat * 9) / 4);
                
                document.getElementById('calories').value = tdee;
                document.getElementById('protein').value = recommendedProtein;
                document.getElementById('carbs').value = recommendedCarbs;
                document.getElementById('fat').value = recommendedFat;
                
                calculateNutritionRatio();
            }
            
            // 监听输入变化，实时计算比例
            ['calories', 'protein', 'carbs', 'fat'].forEach(id => {
                document.getElementById(id).addEventListener('input', calculateNutritionRatio);
            });
            
            // 页面加载时计算一次
            document.addEventListener('DOMContentLoaded', calculateNutritionRatio);
        </script>
    </th:block>
</body>
</html>
